<template>
  <el-dialog v-model="visible" title="搜索车辆" width="500" destroy-on-close top="100px" :draggable="true"
    :close-on-click-modal="false" @closed="handleClose(ruleFormRef)">
    <el-form ref="ruleFormRef" style="max-width: 600px" :model="ruleForm" :rules="rules" label-width="auto"
      :size="formSize" status-icon>
      <el-form-item label="车牌号" prop="licensePlateNumber">
        <el-input v-model="ruleForm.licensePlateNumber" placeholder="请输入车牌号" />
      </el-form-item>
      <el-form-item label="身份证号" prop="IDNumber">
        <el-input v-model="ruleForm.IDNumber" placeholder="请输入身份证号" />
      </el-form-item>
      <el-form-item label="所有人">
        <el-input v-model="ruleForm.owner" placeholder="请输入所有人" />
      </el-form-item>
      <el-form-item label="删除状态">
        <el-select v-model="ruleForm.status" placeholder="请选择删除状态">
          <el-option label="未删除" value="no" />
          <el-option label="已删除" value="yes" />
        </el-select>
      </el-form-item>
      <el-form-item label="更新时间">
        <el-config-provider :locale="zhCn">
          <el-date-picker v-model="ruleForm.date" type="date" placeholder="请选择日期" size="default" />
        </el-config-provider>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="resetForm(ruleFormRef)">取消</el-button>
        <el-button type="primary" @click="submitForm(ruleFormRef)">
          搜索
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { reactive, ref, defineExpose } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { getAjaxTableData } from "@/api/getAjaxData.js";
import pinia from "@/store/pinia";
import { useMapStore } from "@/store/map";
const mapStore = useMapStore(pinia);

const visible = ref(false);
const formSize = ref("default");
const ruleFormRef = ref();
const ruleForm = reactive({
  licensePlateNumber: "",
  IDNumber: "",
  owner: "",
  status: "",
  date: "",
});

const rules = reactive({
  IDNumber: [{ required: false, validator: checkIDNumber, trigger: "blur" }],
});

function checkIDNumber(rule, value, callback) {
  if (value.length === 0) {
    callback();
  } else if (
    !/^[1-9]\d{5}(18|19|(\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/.test(
      value
    )
  ) {
    callback(new Error("请输入格式正确的身份证号"));
  } else {
    callback();
  }
}

function resetFieldsValue(formEl) {
  for (const prop in ruleForm) {
    if (ruleForm.hasOwnProperty(prop)) {
      ruleForm[prop] = "";
    }
  }

  formEl.resetFields();
}

const submitForm = async (formEl) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      const queryInfo = {
        licensePlateNumber: "",
        IDNumber: "",
        owner: "",
        status: "",
        date: "",
      };

      getAjaxTableData(
        mapStore.currentPage,
        mapStore.pageSize,
        mapStore.orderBy,
        mapStore.sort,
        {}
      );
      visible.value = false;
    } else {
      // ElMessage.error("fields");
    }
  });
};

const resetForm = (formEl) => {
  if (!formEl) return;
  resetFieldsValue(formEl);
  visible.value = false;
};

function handleClose(formEl) {
  resetFieldsValue(formEl);
}

defineExpose({
  visible,
});
</script>

<style>
@import url("@/assets/main.css");

/* .el-dialog:not(.is-fullscreen) {
  margin-top: 205px !important;
}

.el-dialog {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  margin-right: 10px !important;
} */
</style>
